<template>
  <div id="add_space">
    <el-dialog
      :title="form.id === 0 ? '新增商品规格' : '修改商品规格'"
      :visible.sync="isShow.flag"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="form"
        style="text-align: left"
        label-width="100px"
      >
        <el-form-item label="属性名">
          <el-input v-model="form.specsname"></el-input>
        </el-form-item>
        <el-form-item label="属性值">
          <div
            v-for="(i, index) in att_array"
            :key="index"
            style="margin-bottom: 5px"
          >
            <el-input
              v-model="att_array[index]"
              style="width: 540px; margin-right: 15px"
            ></el-input>

            <el-button type="success" @click="add_attr()" v-if="index === 0"
              >新增</el-button
            >
            <el-button type="danger" @click="number--" v-else>删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="属性状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isShow"],
  data() {
    return {
      number: 1,
      att_array: [""],
      form: {
        id: 0,
        specsname: "",
        status: 1,
      },
    };
  },
  methods: {
    setData(obj) {
      this.form.id = obj.id;
      this.form.specsname = obj.specsname;
      this.form.status = obj.status;
      this.att_array = obj.attrs;
    },
    submit() {
      var sendData = {
        ...this.form,
        attrs: this.att_array.join(","), // 1,2,3
      };
      var url = "/api/specsadd";
      if (this.form.id != 0) {
        url = "/api/specsedit";
      }
      this.$http.post(url, sendData).then((res) => {
        if (res.code === 200) {
          this.handleClose();
          this.$emit("reloadSpace");
        }
      });
    },
    add_attr() {
      this.att_array.push("");
    },
    del_attr(index) {
      this.att_array.splice(index, 1);
    },
    handleClose() {
      this.isShow.flag = false;
      this.form = {
        id: 0,
        specsname: "",
        status: 1,
      };
      this.att_array = [""];
    },
  },
};
</script>

<style>
</style>